<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<icons @click="backBeforePage" type="left" color="white" size="22"></icons>
			<view class="">菜谱搜索</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<view class="search_box">
				<image src="/static/image/souuo@3x.png"></image>
				<input class="inp" placeholder="甜点" v-model="val" type="text">
			</view>
			<text @click="search">搜索</text>
		</view>
		<!-- 精品名厨 -->
		<view class="container_box">
			<view class="bestVideo">
				<view class="title">
					精品名厨视频-会员专享
					<image src="/static/image/mengbanzu256.png" mode=""></image>
				</view>
				<scroll-view class="scroll-view_H" scroll-x scroll-left="0">
					<view class="scroll-view-item_H" v-for="item in bestVideo" :key="item._id">
						<image class="newVip_pic" :src="item.coverpic"></image>
						<view class="name">{{item.name}}</view>
						<view class="buttom">
							<view class="left">{{item.pageview}}
								<image src="/static/image/mengbanzu278.png"></image>
							</view>
							<view class="right">{{item.collections}}
								<image src="/static/image/mengbanzu279.png"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 内容 -->
			<view class="container_item" v-for="item in searchMenu" :key="item._id" @click="toDetailPage(item._id)">
				<image :src="item.coverpic" mode=""></image>
				<view class="item_info">
					<view class="title">{{item.name}}</view>
					<view class="some">
						<text v-for="(ele,index) in item.ingredient" :key="index">{{ele.name}},</text>
					</view>
					<view class="buttom">
						<view class="left">{{item.pageview}}
							<image src="/static/image/mengbanzu278.png"></image>
						</view>
						<view class="right">{{item.collections}}
							<image src="/static/image/mengbanzu279.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	import {
		getSearchMenuApi,
		getDetailApi,
		getBestVideoApi
	} from "../../../apis/search.js"
	export default {
		mounted() {
			this.getSearchMenu()
			this.getBestVideo()
		},
		data() {
			return {
				searchMenu: [],
				bestVideo: [],
				val:""
			}
		},
		methods: {
			//返回上一页
			backBeforePage() {
				uni.navigateBack()
			},
			//获取搜素菜品
			getSearchMenu() {
				getSearchMenuApi({val:this.val}).then(res => {
					this.searchMenu = res.menus
				})
			},
			//精品名厨视频
			getBestVideo() {
				getBestVideoApi().then(res => {
					this.bestVideo = res.message
				})
			},
			//跳转详情页面
			toDetailPage(id){
				uni.navigateTo({
					url:"/pages/sub/detail/detail?id="+id
				})
			},
			//搜索
			search(){
				this.getSearchMenu()
			}
		},
		components: {
			icons
		}
	}
</script>

<style lang="scss" scoped>
	//头部
	.header {
		width: 100%;
		height: 150rpx;
		background-color: #ee7b2d;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;

		view {
			padding-top: 25rpx;
			line-height: 160rpx;
			text-align: center;
			color: #ffffff;
			font-size: 36rpx;
		}

		icons {
			position: absolute;
			top: 80rpx;
			left: 20rpx
		}
	}

	//搜索
	.search {
		width: 100%;
		height: 100rpx;
		padding-top: 160rpx;
		background-color: #ee7b2d;
		display: flex;
		justify-content: flex-start;

		.search_box {
			width: 540rpx;
			height: 60rpx;
			margin-left: 100rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
			}

			.inp {
				width: 85%;
				margin-left: 10rpx;
				font-size: 26rpx;
			}
		}

		text {
			font-size: 32rpx;
			color: #ffffff;
			line-height: 60rpx;
			margin-left: 14rpx;
		}
	}

	//精品名厨
	.container_box {
		box-sizing: border-box;
		padding: 20rpx 32rpx;

		.bestVideo {
			width: 100%;
			height: 380rpx;
			padding-bottom: 40rpx;

			.title {
				font-size: 28rpx;
				color: #3a3a3a;
				font-weight: 550;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-left: 10rpx;
				}
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 300rpx;
				margin-top: 20rpx;

				.scroll-view-item_H {
					display: inline-block;
					width: 314rpx;
					height: 100%;
					margin-right: 12rpx;
					border-radius: 8rpx;
					background-color: #f9f9f9;

					.newVip_pic {
						width: 100%;
						height: 220rpx;
						border-radius: 8rpx;
					}

					.name {
						font-size: 26rpx;
						color: #575757;
						margin-top: 8rpx;
					}

					.buttom {
						font-size: 18rpx;
						margin-top: 6rpx;
						color: #aaaaaa;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.left {
							margin-right: 60rpx;

							image {
								padding-left: 10rpx;
								width: 28rpx;
								height: 22rpx;
								vertical-align: middle;
							}
						}

						.right {
							image {
								padding-left: 10rpx;
								width: 28rpx;
								height: 22rpx;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}

		/* 内容 */
		.container_item {
			width: 100%;
			height: 210rpx;
			margin-bottom: 16rpx;
			display: flex;

			image {
				width: 314rpx;
				height: 100%;
				border-radius: 16rpx;
				margin-right: 18rpx;
			}

			.item_info {
				.title {
					margin-top: 14rpx;
					font-size: 28rpx;
					color: #3a3a3a;
					font-weight: 550;
				}

				.some {
					margin-top: 16rpx;
					width: 282rpx;
					color: #b3b3b3;
					font-size: 22rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.buttom {
					font-size: 18rpx;
					margin-top: 70rpx;
					color: #aaaaaa;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				
					.left {
						margin-right: 60rpx;
				
						image {
							padding-left: 10rpx;
							width: 28rpx;
							height: 22rpx;
							vertical-align: middle;
						}
					}
				
					.right {
						image {
							padding-left: 10rpx;
							width: 28rpx;
							height: 22rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>
